<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<hello-world></hello-world>
			<component-a></component-a>
			<component-b></component-b>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// ★
			// 局部组件定义好以后只能在定义的父组件中使用，在其他组件中不能使用

			Vue.component('hello-world', {
				data: function () {
					return {
						name: 'Toms',
						age: 3,
					}
				},
				template: `
          <div>
            <p><button @click="add">按钮</button></p>
            <p>{{ name }}</p>
            <p>{{ age }}</p>
            <component-a></component-a>
            <hr>
		      </div>
        `,
				methods: {
					add() {
						this.age++
					},
				},
			})

			// 局部组件定义
			var ComponentA = {
				data: function () {
					return {
						name: 'Tom',
					}
				},
				template: `<div>{{ name }}</div>`,
			}
			var ComponentB = {
				data: function () {
					return {
						name: 'Jerry',
					}
				},
				template: `<div>{{ name }}</div>`,
			}

			var vm = new Vue({
				el: '#app',
				data: {},
				components: {
					// 局部组件绑定
					'component-a': ComponentA,
					'component-b': ComponentB,
				},
			})
		</script>
	</body>
</html>
